<template>
  <div class="email">
    <el-form :model="rule" :rules="rules" ref="rule">
      <el-form-item label="邮箱:" prop="email">
        <el-input type="text" v-model="rule.email" clearable autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码:" prop="ver">
        <el-input type="text" v-model="rule.ver" clearable autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "email",
  data() {
    function email(rule, value, callback) {
      if (/^[A-z][A-z0-9_-]{0,}@[a-zA-Z0-9_-]{3,}\.[a-zA-Z0-9_-]{3,}$/.test(value)) callback();
      else callback("邮箱输入错误");
    }
    function ver(rule, value, callback) {
      if (/^[A-z0-9]{4}$/.test(value)) callback();
      else callback("验证码输入错误");
    }
    return {
      rule: {
        email: "",
        ver: ""
      },
      rules: {
        email: [{ validator: email, trigger: "blur" }],
        ver: [{ validator: ver, trigger: "blur" }]
      }
    };
  }
};
</script>



